<template>
  <view class="container">
    <view class="userinfo-card">
      <view class="card-box">
        <!-- 用户信息模块 -->
        <view class="user-section">
          <view class="avatar-wrap">
            <image class="avatar" src="/static/touxiang.jpg"></image>
          </view>
          <view class="portrait-box">
            <view class="info-box">
              <text class="username">{{ mobile ? mobile : '王师傅' }}</text>
              <text class="text">&#32;&#12288; (综合评分|暂无评价)</text>
            </view>
          </view>
          <u-icon class="img1" name="setting" color="#000" size="28"></u-icon>
          <u-icon class="img" name="scan" color="#000" size="28"></u-icon>
        </view>
        <view class="balance-card-wrap">
          <view class="balance-card">
            <view class="tit">可提现金额(元)</view>
            <view class="xia">
              <view class="num"> <text style="font-size: 40upx">￥</text>{{ moneys }} </view>
              <view @click="getMoneys()" class="withdraw-btn">立即提现</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="main">
      <view class="income-card" style="margin-top: 60upx">
        <view class="tit" @click="goMyEarnings">
          <text>我的收益</text>
          <image src="@/static/right_icon.png" mode=""></image>
        </view>
        <view class="show-content">
          <view class="view-category">
            <view class="num"><text style="font-size: 24upx">￥</text>{{ myAllMoney }}</view>
            <view class="text">全部收益</view>
          </view>

          <view class="line"></view>
          <view class="view-category">
            <view class="num"> <text style="font-size: 24upx">￥</text> {{ myFeiZhishu }}</view>
            <view class="text">审核中</view>
          </view>
        </view>
      </view>
      <!-- 六个模块 -->
      <view class="cont">
        <view class="icon_box">
          <u-icon @click="qianbao()" name="rmb-circle-fill" color="#cf9b40" size="28"></u-icon>
          <view class="icon-text"> 我的钱包 </view>
        </view>
        <view class="icon_box">
          <u-icon name="coupon-fill" color="#cf7940" size="28"></u-icon>
          <view class="icon-text"> 诚信保证金 </view>
        </view>
        <view class="icon_box">
          <u-icon name="star-fill" color="#e2762e" size="28"></u-icon>
          <view class="icon-text"> 信用分 </view>
        </view>
        <view class="icon_box">
          <u-icon name="bookmark-fill" color="#2979ff" size="28"></u-icon>
          <view class="icon-text"> 综合服务分 </view>
        </view>
        <view class="icon_box">
          <u-icon name="bag-fill" color="#d06121" size="28"></u-icon>
          <view class="icon-text"> 积分商城 </view>
        </view>
        <view class="icon_box">
          <u-icon @click="ziliao()" name="account-fill" color="#34b3d3" size="28"></u-icon>
          <view class="icon-text"> 我的资料 </view>
        </view>
      </view>
      <!-- 工具 -->
      <view class="tool-card">
        <view class="tool-item" @click="fankui()">
          <image src="@/static/rindex/tuiguang.png" mode="widthFix" class="view-image-left"></image>
          <view class="item-right">
            <view class="view-text">意见反馈</view>
            <image src="@/static/right_icon.png" class="view-image-right"></image>
          </view>
        </view>
        <view class="tool-item" @click="list()">
          <image src="@/static/rindex/tixian.png" mode="widthFix" class="view-image-left"></image>
          <view class="item-right">
            <view class="view-text">提现明细</view>
            <image src="@/static/right_icon.png" class="view-image-right"></image>
          </view>
        </view>
        <view class="tool-item" @tap="goCustomer">
          <image src="@/static/rindex/kefu.png" mode="widthFix" class="view-image-left"></image>
          <view class="item-right">
            <view class="view-text">客服中心</view>
            <image src="@/static/right_icon.png" class="view-image-right"></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        modalName: '',
        invitationCode: '',
        mobile: '',
        relation_id: '',
        myAllMoney: '112.5',
        myZhishu: '0.0',
        myFeiZhishu: '40.0',

        myTuanAllNumber: '0',
        myTuanZhishu: '0',
        myTuanFeiZhishu: '0',

        isTuan: 0,
        moneys: '20',
      }
    },
    onShow() {},
    onLoad() {},
    methods: {
      goMyEarnings() {
        uni.navigateTo({
          url: '/pages/member/zijing',
        })
      },
      //客服中心
      goCustomer() {
        uni.navigateTo({
          url: '../member/customer',
        })
      },
      //立刻提现
      getMoneys() {
        uni.navigateTo({
          url: '../member/zhifubao',
        })
      },
      // 反馈
      fankui() {
        uni.navigateTo({
          url: '/pages/member/helpandfeedback/helpandfeedback',
        })
      },
      // 明细
      list() {
        uni.navigateTo({
          url: '/pages/member/cashList',
        })
      },
      // 我的钱包
      qianbao() {
        uni.navigateTo({
          url: '/pages/member/zijing',
        })
      },
      // 资料
      ziliao() {
        uni.navigateTo({
          url: '/pages/memberdata/memberdata',
        })
      },
    },
  }
</script>
<style lang="scss" scoped>
  page {
    background: #f2f3f7;
  }

  .container {
    .userinfo-card {
      .card-box {
        width: 100%;
        height: 400upx;
        position: relative;
        z-index: 0;

        .user-section {
          position: absolute;
          top: 0;
          width: 100%;
          padding: 50upx 30upx 210upx;
          display: flex;
          .img {
            position: absolute;
            right: 80rpx;
            top: 20rpx;
          }
          .img1 {
            position: absolute;
            right: 150rpx;
            top: 20rpx;
          }
          .avatar-wrap {
            width: 100upx;
            height: 100upx;
            border-radius: 50%;
            overflow: hidden;

            .avatar {
              width: 100%;
              height: 100%;
            }
          }

          .portrait-box {
            margin-left: 18upx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .info-box {
              font-size: 38upx;
              font-weight: bold;
              color: #333;
              .text {
                font-size: 20upx;
              }
            }

            .tuan {
              display: flex;
              align-items: center;

              .ma {
                font-size: 24upx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #333;
              }

              .fuzi {
                width: 64upx;
                height: 34upx;
                background: #cccccc;
                border-radius: 15upx;
                font-size: 20upx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #333333;
                text-align: center;
                line-height: 34upx;
                margin-left: 10upx;
              }
            }
          }
        }

        .balance-card-wrap {
          width: 87%;
          height: 190upx;
          padding: 0 20upx;
          position: absolute;
          bottom: 0;
          z-index: 10;

          .balance-card {
            width: 100%;
            height: 200upx;
            background: linear-gradient(90deg, #fddeb8 0%, #f9c378 100%);
            border-radius: 20upx;
            padding: 30upx;

            .tit {
              font-size: 32upx;
              font-family: PingFang SC;
              font-weight: bold;
              color: #754202;
            }

            .xia {
              width: 100%;
              display: flex;
              justify-content: space-between;

              .num {
                font-size: 70upx;
                font-family: DINPro;
                font-weight: bold;
                color: #754202;
              }

              .withdraw-btn {
                width: 150upx;
                height: 60upx;
                line-height: 60upx;
                text-align: center;
                background: #3b3533;
                font-size: 28upx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #f9c378;
                border-radius: 10upx;
              }
            }
          }
        }
      }
    }

    .main {
      padding: 20upx;

      .income-card {
        width: 95%;
        background-color: #fff;
        border-radius: 20upx;
        padding: 30upx;
        margin-top: 20upx;

        .tit {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 32upx;
          line-height: 32upx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #333333;

          image {
            width: 10upx;
            height: 21upx;
          }
        }

        .show-content {
          display: flex;
          justify-content: space-around;
          align-items: center;
          margin-top: 40upx;

          .view-category {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .num {
              font-size: 38upx;
              font-family: PingFang SC;
              font-weight: 800;
              color: #333333;
            }

            .text {
              font-size: 24upx;
              font-family: PingFang SC;
              font-weight: 500;
              color: #999999;
            }
          }

          .line {
            width: 1px;
            height: 65upx;
            background-color: #e6e6e6;
          }
        }
      }
      .cont {
        background-color: #ffffff;
        width: 100%;
        padding: 0 30upx;
        margin-top: 20upx;
        border-radius: 20upx;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        .icon_box {
          width: 208rpx;
          height: 100rpx;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          margin-top: 20upx;
          margin-bottom: 20upx;
          .icon-text {
            font-size: 25rpx;
          }
        }
      }
      .tool-card {
        background-color: #ffffff;
        width: 100%;
        padding: 0 30upx;
        margin-top: 20upx;
        border-radius: 20upx;

        .tool-item {
          display: flex;
          flex-direction: row;
          width: 100%;
          height: 100upx;
          align-items: center;
          justify-content: space-between;

          .view-image-left {
            width: 44upx;
          }

          .item-right {
            flex: 1;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;

            .view-text {
              margin-left: 22upx;
              font-size: 28upx;
              font-family: PingFang SC;
              font-weight: bold;
              color: #1a1a1a;
            }

            .view-image-right {
              width: 10upx;
              height: 21upx;
            }
          }
        }
      }
    }
  }
</style>
